<template>
<div>
  <Header></Header>
   <div class="block">
    <!-- <span class="demonstration"></span> -->
    <el-carousel height="800px">
      <el-carousel-item v-for="(item, index) in lists.listBanner" :key="index" :style="'background:url('+item['imgUrl']+');'">
        <!--<img :src="item['imgUrl']" alt="" style="width:100%;height:100%">-->
      </el-carousel-item>
    </el-carousel>
  </div>
  <!--热门场地-->
		<div class="wrap w bg98 pt20 pb50">
			<div class="field w1200 bc pr ">
				<h2 class="f16 fm_yahei lh200 c_red_ce2636 tc ">热门场地</h2>
				<h4 class="tc"><img src="static/images/location.png"/></h4>
				<h4 class="f12 fm lh150 c_red_ce2636 tc mb30">HOT SITE</h4>
				<a @click="goFieldList" class="moreBtn pointer">查看更多</a>
				<div class="siteList w1200">
					<ul class="clearfix ">
						<!--第一排-->
						<li v-for="(list,index) in lists.listPlace" @click="goField(index)"  v-if="index<3" class="w400 h160 fl siteItem ">
							<a class="block fl ">
								<img :src="list.imgUrl.split(',')[0]" class="w200 h160 fl"/>
								<dl class="w180 h140 p10 bg95 fl fm_songti f12 c40 lh150 pr">
									<dt class="fb f14 c20 1h200">{{list.placeName}}</dt>
									<dd class="mt5 mb5">
                    <i v-for="(i,index) in 5" :class="{redStar:list.difficulty>index}" class="grayStar"></i>
									</dd>
									<dd class="introduce">{{limitworld((list.summary===null||list.summary==="")?jsonToHtml(list.jsonDescription):list.summary,30,"...")}} </dd>
									<!-- <dd class="mt10"><img src="../../static/images/images/comments.png" class="vm w15"/><span class="f12 fm c60 vm ml5">2000</span></dd> -->
									<i class="siteItemArrow"></i>
								</dl>
							</a>
						</li>
						<!--第二排-->
					<li v-for="(list,index) in lists.listPlace" @click="goField(index)" v-if="index>=3&&index<=5" class="w400 h160 fl siteItem ">
							<a class="block fr ">
								<img :src="list.imgUrl.split(',')[0]" class="w200 h160 fr"/>
								<dl class="w180 h140 p10 bg95 fr fm_songti f12 c40 lh150 pr">
									<dt class="fb f14 c20 1h200">{{list.placeName}}</dt>
									<dd class="mt5 mb5">
                    <i v-for="(i,index) in 5" :class="{redStar:list.difficulty>index}" class="grayStar"></i>
									</dd>
									<dd class="introduce">{{limitworld((list.summary===null||list.summary==="")?jsonToHtml(list.jsonDescription):list.summary,30,"...")}}</dd>
									<!-- <dd class="mt10"><img src="../../static/images/images/comments.png" class="vm w15"/><span class="f12 fm c60 vm ml5">2000</span></dd> -->
									<i class="siteItemArrow2"></i>
								</dl>
							</a>
						</li>

					</ul>
				</div>
				<!--sitelist结束-->
			</div>
			<!--field结束-->
		</div>
	<!--热门场地结束-->
  <!--热门活动-->
    <div class="wrap w bg100 pt20 pb50 ">
      <div class="activity w1200 bc pr">
        <h2 class="f16 fm_yahei lh200 c_cyan_08a5c3 tc ">热门活动</h2>
        <h4 class="tc"><img src="static/images/activity-icon.png"/></h4>
        <h4 class="f12 fm lh150 c_cyan_08a5c3 tc">HOT ACTIVITY</h4>
        <a @click="goActivityList" class="moreBtn _bottom pointer">查看更多</a>
        <div class="actyList">
          <ul class=" pointer clearfix">
            <li
            v-for="(item,index) in lists.listActivety"
            v-if="index<=3"
            @click="goActivity(index)"
            class="actyItem fl mt20" :class="{fr:index%2==0}">
              <img :src="item.imgUrl" class="w220 h176 fl"/>
              <dl class="w328 h164 b87 fl pt5 pb5 pl20 pr20 f12 fm_songti lh200">
                <dt class="bb87 pb5"><span class="f14 fm_songti fb lh200">{{item.activityName}}</span><img src="static/images/hot-btn.png" alt="热" class="fr mt5"/></dt>
                <dd class="c_cyan_08a5c3 pt5 pb5 ">活动时间：{{item.startTime.substring(0,10)}} 至 {{item.endTime.substring(0,10)}}</dd>
                <dd class="c50 bg97 act_intr hidden_">{{item.activityDescripition}}</dd>
                <dd class=" pt10 pb5"><span class="c_cyan_08a5c3 fl">地点：{{item.provinceName}}</span><span class="c_cyan_08a5c3 fr">场地：{{item.provinceName+item.cityName}}</span></dd>
              </dl>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!--热门活动结束-->
    <!--热门圈子-->
    <div class="wrap w bg98 pt20 pb50 ">
      <div class="circle w1200 bc pr">
        <h2 class="f16 fm_yahei lh200 c_grn_119c5b tc ">热门圈子</h2>
        <h4 class="tc"><img src="static/images/circle-icon.png"/></h4>
        <h4 class="f12 fm lh150 c_grn_119c5b tc mb30">HOT ACTIVITY</h4>
        <a @click="goCommunityList" class="moreBtn pointer">查看更多</a>
        <div class="circleList">
          <ul class="clearfix" >
            <li v-for="(list,index) in lists.listGroup"
            v-if="index<=8"
            @click="sendParams(index)"
            class="circleItem w220 h80 fl mr25 mb20 pointer">
              <img :src="list.imgUrl" class="w60 h60 fl"/>
              <dl class="w130 h60 bg100 p10  b87 fr fm_songti f12 lh150 c50 pr">
                <dt ><span class="c_grn_119c5b fb">{{list.groupName}}</span><span class="fr">{{list.userCount}}人</span></dt>
                <dd class=" cir_info mt5">{{list.introduce}}</dd>
                <i class="shadeArrow"></i>
              </dl>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!--热门圈子结束-->

  <Footer></Footer>
  <!-- <Login></Login>   -->
</div>
</template>
<script>
  import Header from '../components/header'
  import Footer from '../components/footer'
  // import Login from '../views/login'
  import axios from '../../config/http'

  export default {
  components: {
    Header,
    Footer
    // Login
  },
  data () {
    return {
      lists:[]
    }
  },
  mounted () {
   axios({
	   	url:"/Common/GetHomeInfo",
	   	method:"post",
	   	headers:{
	   		client:"pc"
	   	},
	  	data:{
	      	"cityID": "47",
		      "selfCount": 0
		     }
      }).then(res => {
        this.lists = res.data.data
      });
  },
  methods: {
    // 跳转对应热门圈子
    sendParams(index){
      // let item = this.lists.listGroup[index].groupIDExtend
      // this.$router.push({
      //       path: '/communityDetail',
      //       query: {
      //           groupIDExtend: item
      //       }
      //   })
      this.$message.warning("近期开放，敬请期待");
    },
    // 跳转热门活动
    goActivity(index){
      let item = this.lists.listActivety[index].id
      this.$router.push({
            path: '/activityDetail',
            query: {
                id: item
                // dataObj: this.msg
            }
        })
    },
     // 跳转热门场地
    goField(index){
      console.log(this.lists.listPlace[index]);
      let item = this.lists.listPlace[index].id;
      this.$router.push({
            path: '/filedDetail',
            query: {
                id: item
                // dataObj: this.msg
            }
        })
    },
    // 加载更多场地
    goFieldList(){
       this.$router.push({path:'/fieldList'})
    },
     // 加载更多热门活动
    goActivityList(){
       this.$router.push({path:'/activityList'})
    },
    // jsonToHtml 兼容富文本
    jsonToHtml: function(json){
      let array = json.split('[{').join('').split('}]').join('').split('},{');
      return this.getText(array);
    },
    getText(argument) {
      let txt = "";
      for (let i = 0; i < argument.length; i++) {
        let Item = argument[i].split(',');
        for (let n = 0; n < Item.length; n++) {
          let ItemArr = Item[n].split(':');
          if (ItemArr[0].split("\"").join("") === "title") {
            txt += ItemArr[1].split("\"").join("")
          }
        }
      }
      return txt.replace(/[\\n]/g, "")
    },
     // 加载更多热门圈子
    goCommunityList(){
        this.$message.warning("近期开放，敬请期待");
       // this.$router.push({path:'/communityList'})
    },
    // 限制显示字数
    limitworld: function (worlds, wordlength, mark) {
      var nowLength = worlds.length;
      var newWorlds = "";
      if (nowLength > wordlength) {
        newWorlds = worlds.substr(0, wordlength) + mark;
      } else {
        newWorlds = worlds;
      }
      return newWorlds;
    },
  }
}
</script>
<style lang="less" scoped>
  .el-carousel__indicators{
    padding: 2px 10px;
    background: rgba(255,255,255,0.2);
    border-radius: 8px;
    margin-bottom:20px;
    .el-carousel__button{
      display: inline-block;
      width:10px;
      height:10px;
      border-radius: 50%;
    }
  }
  .el-carousel__item{
  	background-repeat:no-repeat !important;
  	background-size:120% !important;
  	background-position: center !important;
  }
  dl{
    text-align: left;
  }
   dl .redStar{
	 background:url(../../static/images/star-red.png) no-repeat center;
 }
  #app .el-carousel__indicator{
    padding:0 5px;
  }
  .introduce,.hidden_{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    height:auto;
  }
  .hidden_{
    height:46px;
  }
  ._bottom{
   top:50px;
  }
  .pointer{
    cursor: pointer;
  }
  .block{
  	width: 1200px;
  }
  .circleList ul li:nth-child(5n){
    margin-right: 0px;
  }
</style>
